<template>
    <div class="home">
        <div class="header">
            {{userInfo.nickname||null}}
        </div>
        <div class="userinfo">
            <imgCut @callback="callback" :width="100" :height="100">
                <div class="userhead">
                    <img :src="userInfo.portrait">
                </div>
            </imgCut>
            <div class="numbercontainer">
                <div class="attention">
                    <p class="number">{{userInfo.attention_total||0}}</p>
                    <p>关注</p>
                </div>
                <div class="fans">
                    <p class="number">{{userInfo.fans_total||0}}</p>
                    <p>粉丝</p>
                </div>
            </div>
        </div>
        <div class="slogan">
            {{userInfo.slogan}}
        </div>
        <div class="businesstab">
            <div class="businessorder">
                <Icon type="ios-paper-outline"></Icon>
                <p>我的订单</p>
            </div>
            <div class="bussinesswallet">
                <Icon type="social-usd-outline"></Icon>
                <p>我的钱包</p>
            </div>
        </div>
        <div class="linklist">
            <ul>
                <li>
                    <router-link to="/">我的收藏</router-link>
                    <Icon type="ios-arrow-right"></Icon>
                </li>
                <li>
                    <router-link to="/">我的发布</router-link>
                    <Icon type="ios-arrow-right"></Icon>
                </li>
                <li>
                    <router-link to="/">我的技能</router-link>
                    <Icon type="ios-arrow-right"></Icon>
                </li>
                <li>
                    <router-link to="/">我的作品</router-link>
                    <Icon type="ios-arrow-right"></Icon>
                </li>
                <li>
                    <p @click="logOut">退出登入</p>
                </li>
            </ul>
        </div>
        <navigation></navigation>
    </div>
</template>

<script>
    import {imgCut} from 'vue-imgcut';
    import navigation from '@/components/navigation';


    export default {
        name: 'home',
        data() {
            return {
                userInfo: {}
            };
        },
        created() {
            this.$Utils.login.getUserInfo().then((userInfo) => {
                if (userInfo.error_msg) {
                    console.log(userInfo.error_msg);
                } else {
                    this.userInfo = userInfo.user;
                    console.log(userInfo.user);
                }
            }).catch((error) => {
                console.log(error);
            });
        },
        mounted() {
        },
        components: {
            imgCut,
            navigation
        },
        methods: {
            callback(img) {
                this.imgsrc = img;
                console.log(img);
            },
            logOut() {
                this.$Modal.confirm({
                    title: 'tip',
                    content: '是否退出登入？',
                    onOk: () => {
                        this.CONF.user = null;
                        this.$Utils.login.logout().then(() => {
                            this.$router.push({name: 'index'});
                        });
                    }
                });
            }
        }
    }
    ;
</script>

<style lang="scss">
    .home {
        margin-bottom: 60px;
        .header {
            top: 0px;
            height: 44px;
            width: 100%;
            z-index: 999;
            background: rgb(253, 163, 62);
            line-height: 44px;
            font-size: 17px;
            color: white;
            font-weight: 300;
            text-align: center;
        }
        .userinfo {
            height: 150px;
            display: flex;
            width: 100%;
            .userhead {
                img {
                    margin: 30px 0 0 30px;
                    width: 90px;
                    height: 90px;
                    justify-content: space-around;
                    border-radius: 50%;
                }
            }
            .numbercontainer {
                display: flex;
                width: 130px;
                margin: 50px 50px;
                justify-content: space-around;
                .number {
                    color: rgb(253, 163, 62);
                }
                .attention {
                    font-size: 16px;
                }
                .fans {
                    font-size: 16px;
                }
            }
        }
        .slogan {
            padding: 0 30px 20px;
            color: #aaa;
            text-align: left;
            font-size: 16px;
        }
        .businesstab {
            display: flex;
            border-top: 2px solid #eee;
            border-bottom: 2px solid #eee;
            padding: 10px;
            justify-content: space-around;
            .businessorder {
                width: 50%;
                height: 80px;
                font-size: 15px;
                i {
                    font-size: 40px;
                    padding-bottom: 10px;
                }
            }
            .bussinesswallet {
                font-size: 15px;
                width: 50%;
                height: 80px;
                i {
                    font-size: 40px;
                    padding-bottom: 10px;

                }
            }
        }
        .linklist {
            width: 100%;
            ul {
                display: block;
                padding: 10px 0;
                background: #eee;
                li {
                    display: flex;
                    margin-top: 2px;
                    background: #fff;
                    justify-content: space-between;
                    width: 100%;
                    height: 50px;
                    text-align: left;
                    font-size: 18px;
                    a {
                        font-weight: 300;
                        width: 100%;
                        color: #aaa;
                    }
                    i {
                        line-height: 50px;
                    }
                    p {
                        width: 100%;
                        color: red;
                        font-weight: 700;
                        text-align: center;
                    }
                    padding: 0 20px;
                    line-height: 50px;
                }
            }

        }
    }
</style>
